<template>
  <el-dialog
    title="新增用户"
    :visible.sync="isTrue"
    width="50%"
    :before-close="handleClose"
  >
    <el-form label-width="100px">
      <el-row :gutter="20">
        <el-col :lg="24" :xl="24">
          <el-form-item label="名称">
            <el-input
              type="text"
              @input="inputPY"
              maxlength="4"
              v-model="queryParam.userName"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="账号">
            <el-input
              type="text"
              v-model="queryParam.userAccount"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="手机号">
            <el-input
              v-model="queryParam.mobile"
              placeholder="请输入手机号"
              maxlength="11"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="关联角色">
            <el-select
              v-model="queryParam.roleId"
              placeholder="请选择关联角色"
              style="width: 100%"
            >
              <el-option
                clearable
                v-for="(item, index) in roleList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="sureBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import serve from "@/api/jurisdiction";
import vPinyin from "./vur-py";
export default {
  data() {
    return {
      queryParam: {
        userName: "",
        userAccount: "",
        mobile: "",
        roleId: ""
      },
      passwordAgain: ""
    };
  },
  props: {
    isTrue: {
      type: Boolean,
      default() {
        return false;
      }
    },
    roleList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    /* eslint-disable */
    isTrue(val) {
      this.queryParam.userName = "";
      this.queryParam.userAccount = "";
      this.queryParam.mobile = "";
      this.queryParam.roleId = "";
      this.passwordAgain = "";
    }
  },
  created() {},
  methods: {
    inputPY() {
      const pinYin = vPinyin
        .chineseToPinYin(this.queryParam.userName)
        .toLowerCase();
      this.queryParam.userAccount = pinYin;
    },
    handleClose() {
      this.queryParam.userName = "";
      this.queryParam.userAccount = "";
      this.queryParam.mobile = "";
      this.queryParam.roleId = "";
      this.passwordAgain = "";
      this.$emit("closeModel", false);
    },
    sureBtn() {
      if (this.queryParam.userName === "") {
        this.$message.error("请输入名称");
        return;
      }
      if (this.queryParam.userAccount === "") {
        this.$message.error("请输入账号");
        return;
      }
      if (this.queryParam.mobile === ""||this.queryParam.mobile.length!==11) {
        this.$message.error("请正确输入手机号");
        return;
      }
      if (this.queryParam.roleId === "") {
        this.$message.error("请选择关联角色");
        return;
      }
      serve.accountApiAddServe(this.queryParam).then(res => {
        if (res.code === 200) {
          this.$confirm(`账号为：${res.data.mobile}，密码为：${res.data.loginPassword}`, '创建成功', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
          })
          this.handleClose();
        } else {
          this.$message.error(res.message, 2);
        }
      });
    }
  }
};
</script>

<style scoped></style>
